.diary-box {
    clear: both;
}

.diary-list {
    width: 94%;
    margin:auto;
}

.date {
    text-align: center;
    margin-bottom: 1rem;
}

.content {
    /*display: flex;*/
}

.time-box {
    text-align: center;
    color: #FF90CA;
    font-size: 14px;
    height: 4.5rem;
    float: left;
    width: 20%;

}

.time-box img {
    width: 1rem;
    margin-right: 0.2rem;
}

.time-box p {
    line-height: 1.5rem;
}

.comment {
    display: flex;
    justify-content: center;
}

.diary-info {
    float: right;
    width: 80%;
    margin-bottom: 1rem;

}

.avatar {
    width: 5rem;
    height: 4.5rem;
    position: relative;
    float: left;

}

.avatar img {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
}

.avatar::before,
.avatar::after {
    content: '';
    border-color: transparent;
    border-style: solid;
    position: absolute;
    top: 0;
    right: 0;
}

.avatar::after {
    border-right: 1px solid #AFAFAF;
    height: 3.5rem;
    margin-top: 0.5rem;
    /*border-width: 1rem;*/
    /*border-right-color: #FF8291;*/
    /*border-top-color: #FF8291;*/
}

.title-box {
    font-size: 14px;
    margin-left: 0.5rem;
    height: 3.5rem;
    margin-top: 0.5rem;
    float: left;
    width: 62%;
}

.title-box .title {
    color: #808080;
}
.read{
    text-align: right;
    margin-top: 0.25rem;
    color: #FF90CA;
}